<template>
  <div id="contain">
    <!-- <img src="" alt width="100%"> -->
    <div id="mbl"></div>
    <transition name="fade">
      <el-table
        :data="tableData"
        style="width: 60%"
        size="medium"
        class="table"
        :row-class-name="tableRowClassName"
        v-if="show"
      >
        <el-table-column label="排名" prop="rank" align="center">
          <template slot-scope="scope">
            <img v-bind:src="pic[scope.row.rank]" alt>
            <!-- <div class="rank">{{ scope.row.rank }}</div> -->
          </template>
        </el-table-column>
        <el-table-column label="节目" prop="program" align="center"></el-table-column>
        <el-table-column label="得票数" prop="ballot" align="center"></el-table-column>
      </el-table>
    </transition>
    <!-- <el-table
      :data="tableData"
      style="width: 50%"
      class="table"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="排名" prop="rank" align="center">
        <template slot-scope="scope">
          <img v-bind:src="pic[scope.row.rank]" alt>
        </template>
      </el-table-column>
      <el-table-column label="节目" prop="program" align="center"></el-table-column>
      <el-table-column label="得票数" prop="ballot" align="center"></el-table-column>
    </el-table>-->
  </div>
</template>
<script>
import jQuery from "jquery";
import { getRank } from "../api/nianhui.js";
export default {
  data() {
    return {
      tableData: [{ rank: "", program: "", ballot: "" }],
      pic: [
        require("../../src/assets/img/p1.png"),
        require("../../src/assets/img/p2.png"),
        require("../../src/assets/img/p3.png"),
        require("../../src/assets/img/p4.png"),
        require("../../src/assets/img/p5.png"),
        require("../../src/assets/img/p6.png"),
        require("../../src/assets/img/p7.png"),
        require("../../src/assets/img/p8.png"),
        require("../../src/assets/img/p9.png"),
        require("../../src/assets/img/p10.png"),
        require("../../src/assets/img/p11.png"),
        require("../../src/assets/img/p12.png"),
        require("../../src/assets/img/p13.png"),
        require("../../src/assets/img/p14.png")
      ],
      show: false,
      timer: null
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      return "tableRow";
    },
    getData() {
      getRank().then(res => {
        if (res) {
          this.tableData.pop();
          // 添加RANK
          // 一行一行的显示
          let count = res.msg.length > 5 ? 5 : res.msg.length;
          // console.log(count);
          this.timer = setInterval(() => {
            // 如果最终名次不够5个,就按照实际的来排
            count -= 1;
            if (count !== -1) {
              res.msg[count].rank = count;
              this.tableData.unshift(res.msg[count]);
            } else {
              clearInterval(this.timer);
            }
          }, 1000);
          // for (let i = 0; i < 7; i++) {
          //   res.msg[i].rank = i;
          //   this.tableData.push(res.msg[i]);
          // }
          //    = res.msg;
        } else {
          this.tableData = null;
        }
      });
    },
    delay() {
      var _this = this;
      setTimeout(function() {
        _this.getData();
      }, 3000);
    }
  },
  mounted() {
    // 获取高度
    jQuery("#contain").css("height", document.documentElement.clientHeight);
    // this.getData();
    this.delay();
    this.show = true;
  }
};
</script>
<style>
/* .contain {
  display: flex;
} */
html,
body {
  height: 100%;
}
#contain,
#mbl::before {
  width: 100%;
  min-width: 1000px;
  background: url("../assets/img/background.jpg") no-repeat 0 0;
  /* -moz-background-size: 100% 100%; */
  background-size: cover;
  /* background-position: center 0; */
  background-attachment: fixed;
}
#mbl {
  position: relative;
  background: hsla(0, 0%, 90%, 0.2);
  overflow: hidden;
}
.table {
  /* position: absolute; */
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font: 3rem arial, sans-serif;
}
#mbl {
  content: "";
  z-index: 100;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: blur(20px);
  /* margin: * */
}
.el-table .tableRow {
  background: #f5f7fa;
  height: 7rem;
  font-family: "华文行楷", Georgia, Serif;
  /* font: "Comic Sans MS"; */
  color: rgb(243, 54, 171);
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de,
    0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
.el-table .rank {
  width: 52px;
  height: 53px;
  background: url("../assets/img/r3.png") no-repeat 0 0;
  margin-left: 40%;
  text-align: center;
  padding-top: 8px;
  color: white;
}
.el-table .cell {
  height: 7rem;
  line-height: 7rem;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 10s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>